<template>
  <!-- 图片展示区 -->
  <div>
    <div class="img_show_wrap" v-for='item in items'>
      <h1>{{ item.name }}</h1>
      <img :src="item.url" alt="">
    </div>
  </div><!-- 循环体外面要有一个根标签 -->
</template>

<script>
export default {
  name: 'banner',
  //data即使为空也不能省略
  data () {
    return {
      items:[]
    }
  },
  mounted:function(){
    var path = window.location.pathname;
    console.log(path);  
    var that = this;
    var domainName = "http://www.wangry.com:3001";
    if(path=='/'){
      $.get(domainName+"/banner",{type:"1",index:"1"},function(result){
        that.items = result;
      });
    }else if(path=='/Past'){
      $.get(domainName+"/banner",{type:"2",index:"1"},function(result){
        that.items = result;
      });
    }else if(path=='/Soon'){
      $.get(domainName+"/banner",{type:"3",index:"1"},function(result){
        that.items = result;
      });
    }
  }
}
/*同一个组件结构，根据路由不同，为数组变量赋予不同的值,赋值在mounted生命周期钩子中进行
问题：如何写方法并调用？
*/

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .img_show_wrap h1{
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .img_show_wrap img{
    width: 100%;
    display: block;
  }
  @media screen and (max-width: 768px) {
    h1,.img_show_wrap h1{
      font-size: 15px;
    }
  }
</style>
